* {padding: 0px; margin: 0px;}
html,body{height: 100%;width: 100%;}

.clear {clear: both;}
/*去外边框*/
input {outline:none;border:none;}
/*阴影*/
.shadow-right-bottom {box-shadow:5px 5px 10px rgba(0,0,0,0.3);}
.shadow-top {box-shadow:0px -5px 5px rgba(0,0,0,0.3);}

/*分割线*/
.split-line{width:100%;height:20px;background: #ffffff}

/*.list {padding:30px;margin:0px auto;width:1020px;height:fit-content;background: #fff;}*/
/*.list .col {position:relative;float:left;margin:10px 10px;width:300px; height: 300px;overflow: hidden;background: #cc3f46;}*/
/*.video-img {position:absolute;left:0px;top:0px;width:300px;height: 300px;}*/
/*.col .info {position: absolute;left:0px;bottom: 0px;width:300px;height: 80px;padding:5px;background: rgba(85, 85, 85, 0.8);color: #fff;font-size: 8px;}*/
/*.col .collect {position: absolute; right:0px; top: 8px;width:64px;height:20px;line-height: 20px;text-align:center;background: #dfdfdf;}*/

/*课程*/
.list { position: relative;padding:30px;margin:0px auto;width:1020px;height:780px;background: #fff;}
.list .col {position:relative;float:left;margin:10px 10px;width:300px; height: 240px;overflow: hidden;background: #cc3f46;}
.video-img {position:absolute;left:0px;top:0px;width:300px;height: 240px;}
.col .info {position: absolute;left:0px;bottom: 0px;width:300px;height: 80px;padding:5px;background: rgba(85, 85, 85, 0.8);color: #fff;font-size: 16px;}
.col .name {position: absolute;left:0px;top: 0px;width:300px;height: 30px;line-height: 30px;padding:5px;background: rgba(85, 85, 85, 0.8);color: #fff;font-size: 18px;}
.col .collect {z-index: 2; position: absolute; right:0px; top: 8px;width:64px;height:20px;line-height: 20px;text-align:center;background: #D50810;color:#fff;}
/*分页*/
.list-title {text-align: center;}
.paging {position: absolute; bottom: 30px; right: 30px; width: fit-content;}
.paging a {cursor:pointer;padding:6px 8px; border-radius: 8px;background: #D50810;color: #fff;}
.paging .up {float: left;}
.paging .down {float: left;}
.paging .page {float:left;text-align: center;padding:6px 8px;}


.model {z-index: 999;position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.win-tip .tip{
    width: 25rem;
    height: auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #fff;
}
.win-tip .tip p{
    font-size: 14px;
}

.win-tip .tip span{
    width: 100%;
    height: 4rem;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    line-height: 4rem;
    background-color: #314167;
    color: #fff;
}
.win-tip .tip span:hover{
    background-color: #D50810;
}

@-webkit-keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes move-animation {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(-64px, 0);
        transform: translate(-64px, 0);
    }
    75% {
        -webkit-transform: translate(32px, 0);
        transform: translate(32px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@-webkit-keyframes move-animation {
    0%{
        -webkit-transform: translate(0,0);
    }
}
@keyframes move-animation {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(-64px, 0);
        transform: translate(-64px, 0);
    }
    75% {
        -webkit-transform: translate(32px, 0);
        transform: translate(32px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
